import React, { useState, useEffect } from 'react';
import { formatCount, formatDuration } from '@/utils/format.js';
import moment from 'moment';
import { Pagination } from 'antd';
import CustomIcon from '@/components/CustomIcon';
import axios from '@/utils/axios.js';
import s from './style.less';
import { useHistory } from 'react-router-dom';

const MV = (props) => {
  // mv地址
  const [mvUrl, setMvUrl] = useState('');
  // 相似的MV列表
  const [simiMv, setSimiMv] = useState([]);
  // 页码
  const [page, setPage] = useState(1);
  // 每页显示条数
  const [limit, setLimit] = useState(5);
  // 总条数
  const [total, setTotal] = useState(0);
  // mvId
  const [mvId, setMvId] = useState(0);
  // mv名称
  const [mvName, setMvName] = useState('');
  // 播放次数
  const [playCount, setPlayCount] = useState('');
  // 发布时间
  const [publishTime, setPublishTime] = useState('');
  // 描述
  const [desc, setDesc] = useState('');
  // 歌手名
  const [artistName, setArtistName] = useState('');
  // 封面
  const [artistCover, setArtistCover] = useState('');
  // 热门评论
  const [hotComments, setHotComments] = useState([]);

  const history = useHistory();

  useEffect(() => {
    setMvId(props.match.params.id);
    getData();
  }, [mvId, page, limit, total, simiMv]);

  const getData = () => {
    getMvUrlData();
    getSimiMVData();
    getMvDetailData();
    getHotCommentsData();
  }

  // 获取MV的Url
  const getMvUrlData = async () => {
    const res = await axios.get('/mv/url', {
      params: {
        id: mvId
      }
    });
    if (res.data.code === 200) {
      setMvUrl(res.data.data.url);
    }
  }

  // 获取相关推荐的MV列表数据
  const getSimiMVData = async () => {
    const res = await axios.get('/simi/mv', {
      params: {
        mvid: mvId
      }
    });
    if (res.data.code === 200) {
      setSimiMv(res.data.mvs);
    }
  }

  const getMvDetailData = async () => {
    const res = await axios.get('/mv/detail', {
      params: {
        mvid: mvId
      }
    });
    if (res.data.code === 200) {
      setMvName(res.data.data.name);
      setPlayCount(res.data.data.playCount);
      setPublishTime(res.data.data.publishTime);
      setDesc(res.data.data.desc);
      getArtistInfoData(res.data.data.artistId);
    }
  }

  // 获取热门评价
  const getHotCommentsData = async () => {
    const res = await axios.get('/comment/hot', {
      params: {
        id: mvId,
        type: 1
      }
    });
    if (res.data.code === 200) {
      setHotComments(res.data.hotComments);
    }
  }

  const toMv = (id) => {
    history.push(`/mv/${id}`);
  }

  // 获取艺术家信息
  const getArtistInfoData = async (artistId) => {
    const res = await axios.get('/artists', {
      params: {
        id: artistId
      }
    });
    if (res.data.code === 200) {
      setArtistName(res.data.artist.name);
      setArtistCover(res.data.artist.picUrl);
    }
  }

  const onChange = (page)=>{
    setPage(page);
    getHotCommentsData();
  }

  // MV视频播放器
  const renderMvVideo = () => {
    return (
      <div className={s.videoWrap}>
        <h3 className={s.title}>MV详情</h3>
          <video autoPlay controls src={mvUrl}></video>
      </div>
    )
  }

  // MV详情信息
  const renderMvInfo = () => {
    return (
      <div className={s.infoWrap}>
        <div className={s.singerInfo}>
          <div className={s.avatarWrap}>
            <img src={artistCover} alt="" />
          </div>
          <span className={s.name}>{artistName}</span>
        </div>
        <div className={s.mvInfo}>
          <h2 className={s.title}>{mvName}</h2>
          <span className={`${s.infoFont} ${s.fabu}`}>发布：{publishTime}</span>
          <span className={`${s.infoFont} ${s.bofang}`}>播放：{formatCount(playCount)}</span>
          <p className={`${s.infoFont} ${s.desc}`}>{desc}</p>
        </div>
      </div>
    )
  }

  // 相关推荐
  const renderMvRecommend = () => {
    return (
      <div>
        <h3 className={s.title}>相关推荐</h3>
        <div className={s.items}>
          {
            simiMv.map((item) => {
              return (
                <div
                  className={s.item}
                  onClick={() => { toMv(item.id) }}
                  key={item.id}
                >
                  <div className={s.imgWrap}>
                    <img src={item.cover} alt="" />
                    <div className={s.numWrap}>
                      <CustomIcon type="icon-play" className={s.iconPlay} />
                      <div className={s.num}>{formatCount(item.playCount)}</div>
                    </div>
                    <span className={s.time}>
                      {formatDuration(item.duration)}
                    </span>
                  </div>
                  <div className={s.infoWrap}>
                    <div className={s.name}>{item.name}</div>
                    <div className={s.singer}>{item.artistName}</div>
                  </div>
                </div>
              )
            })
          }
        </div>
      </div>
    )
  }

  // 评论
  const renderComments = () => {
    return (
      <div className={s.commentsWrap}>
        {
          <div className={s.commentWrap}>
            <span className={s.title}>热门评论</span>
            <span className={s.number}>{'(' + hotComments.length + ')'}</span>
            {
              hotComments.map((item) => {
                return (
                  <div className={s.item} key={item.commentId}>
                    <div className={s.iconWrap}>
                      <img src={item.user.avatarUrl} alt="" />
                    </div>
                    <div className={s.contentWrap}>
                      <div className={s.content}>
                        <span className={s.name}>{item.user.nickname+'  '}</span>
                        <span className={s.comment}>{item.content}</span>
                      </div>
                      {
                        item.beReplied.length > 0 && (<div className={s.reContent}>
                          <span className={s.name}>
                            {item.beReplied[0].user.nickname+'  '}
                          </span>
                          <span className={s.comment}>
                            {item.beReplied[0].content}
                          </span>
                        </div>)
                      }
                      <div className={s.date}>
                        {moment(item.time).format('YYYY-MM-DD')}
                      </div>
                    </div>
                  </div>
                )
              })
            }
          </div>
        }
        <div className={s.pagination}>
          <Pagination
            current={page}
            onChange={onChange}
            total={total}
            pageSize={limit}
            showSizeChanger={false}
          />
        </div>
      </div>
    )
  }

  return (
    <div className={s.mvContainer}>
      <div className={s.mvWrap}>
        {/* 渲染MV视频播放器 */}
        {renderMvVideo()}
        {/* 渲染MV详情信息 */}
        {renderMvInfo()}
        {/* 评论 */}
        {renderComments()}
      </div>
      <div className={s.mvRecommend}>
        {/* 推荐模块 */}
        {renderMvRecommend()}
      </div>
    </div>
  )
}

export default MV;